<template>
    <div class="blog">
        <Row type="flex" justify="center">
            <Col span="12">
                <Row style="margin-bottom: 30px">
                    <Col style="text-align: center">
                        <h1 style="color: #17233d">欢迎来到 <span style="color: #2d8cf0">JavaDog</span>博客</h1>
                    </Col>
                </Row>
                <Row style="margin-bottom: 30px">
                    <Col style="text-align: center">
                        <Avatar src="https://img.javadog.net/blog/3684003dd669bf079a23104972461041.jpg" size="100" />
                    </Col>
                </Row>
                <Row style="margin-bottom: 30px; text-align: center" type="flex" justify="center">
                    <Col span="3">
                        <Tooltip max-width="200">
                            <Button type="success" @click="adv">微信号</Button>
                            <div slot="content">
                                <Avatar shape="square" src="https://img.javadog.net//blog/1682066245307.png" size="160" />
                            </div>
                        </Tooltip>
                    </Col>
                    <Col span="3">
                        <Tooltip max-width="200">
                            <Button type="primary" @click="adv">公众号</Button>
                            <div slot="content">
                                <Avatar shape="square" src="https://img.javadog.net//blog/qrcode_for_gh_e65b4f531fe5_258 (1).jpg" size="160" />
                            </div>
                        </Tooltip>
                    </Col>
                    <Col span="3">
                        <Tooltip max-width="200">
                            <Button type="warning" @click="adv">QQ号</Button>
                            <div slot="content">
                                <Avatar shape="square" src="https://img.javadog.net//blog/1682066373665.png" size="160" />
                            </div>
                        </Tooltip>
                    </Col>
                    <Col span="3">
                        <Tooltip max-width="200">
                            <Button type="error" @click="adv">博客</Button>
                            <div slot="content">
                                <Avatar shape="square" src="https://img.javadog.net//blog/https___blog.javadog.net.png" size="160" />
                            </div>
                        </Tooltip>
                    </Col>
                    <Col span="3">
                        <Tooltip max-width="200">
                            <Button type="info" @click="adv">赞助</Button>
                            <div slot="content">
                                <Avatar shape="square" src="https://img.javadog.net//blog/1682302790745.png" size="160" />
                            </div>
                        </Tooltip>
                    </Col>
                </Row>

                <Scroll height="600">
                    <Timeline>
                        <TimelineItem v-for="(item, index) in articleData" :key="item.id" :color="index % 2 ==0? 'green':'blue'">
                            <p class="time">{{ formatDate(item.updateTime)}}</p>
                            <div class="content">
                                <Card style="cursor: pointer" @click.native="toDetail(item)">
                                    <Row>
                                        <Col>
                                            <p style="font-size: 16px; font-weight: bold; color: #17233d;text-decoration: underline;">{{ item.title }}</p>
                                        </Col>
                                    </Row>
                                    <Row style="margin-top: 10px">
                                        <Col  v-html="item.summary"></Col>
                                    </Row>
                                </Card>
                            </div>
                        </TimelineItem>
                    </Timeline>
                </Scroll>

            </Col>
        </Row>
        <Modal v-model="advShow" draggable scrollable :mask="false" title="快来加入" width="320">
            <h2>扫码加入公众号,解锁更多姿势</h2>
            <div style="text-align: center">
                <Avatar shape="square" src="https://img.javadog.net//blog/qrcode_for_gh_e65b4f531fe5_258 (1).jpg" size="160" />
            </div>
        </Modal>
    </div>
</template>

<script>
import moment from 'moment'

export default {
    name: 'blog',
    data() {
        return {
            // 广告标识
            advShow: false,
            // 页码
            current: -1,
            // 页长
            size: -1,
            // 总数
            total: 0,
            // 文章数据
            articleData: [],
        }
    },
    methods: {
        init() {
            this.articlePage()
        },
        // 格式化时间
        formatDate(updateTime) {
            return moment(updateTime).format('yyyy-MM-DD HH:mm:ss')
        },
        // 去详情
        toDetail(article) {
            let routeData = this.$router.resolve({ path: '/detail', query: { articleId: article.id } })
            window.open(routeData.href, '_blank')
        },
        // 文章分页列表
        async articlePage(params) {
            const { current, size } = this
            const param = {
                current,
                size,
                ...params,
            }
            const res = await this.$api.blogArticlePage(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.articleData = res.data.records
            this.total = res.data.total
        },
        // 广告
        adv() {
            this.advShow = true
        },
    },
    mounted() {
        this.init()
    },

}
</script>

<style scoped>
.blog{
    padding: 30px;
}


.time{
    font-size: 14px;
    font-weight: bold;
}
.content{
    padding-left: 5px;
}
</style>

<style>
::-webkit-scrollbar {
    width: 6px;
    background-color: #d8d8d8;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius:10px;
}

::-webkit-scrollbar-thumb {
    background-color: #bfc1c4;
}
</style>
